<template>
  <div class="home">
    <!-- 头部 -->
    <mm-header></mm-header>
    <!-- 菜单 -->
      <div class="menu clearfix" ref="menuMove" @touchstart="handleTouchStart" @touchmove = "handleTouchMove" @touchend="handleTouchEnd">
        <div class="menuPage1 fl" ref="page1">
          <ul class="clearfix">
          <li v-for="(item , index) in firstList" :key="item.indexmenuId" @click="handleMore(index)">
            <router-link :to="setHref(index)">
              <div class="img-wrap" v-html="imgName(index)"></div>
              <p>{{item.name}}</p>
            </router-link>
          </li>
          </ul>
        </div>
        <div class="menuPage2 fl">
          <ul class="clearfix">
          <li v-for="(item , index) in nextList" :key="item.indexmenuId">
            <router-link :to="setHref2(index)">
              <div class="img-wrap" v-html="imgName(index)"></div>
              <!-- <img src="../images/ic_bcj.png" alt=""> -->
              <p>{{item.name}}</p>
            </router-link>
          </li>
          </ul>
        </div>
      </div>
    <!-- 折扣 -->
      <div class="discount">
        <div class="discount-title clearfix">
          <h2 class="fl">超值折扣推荐</h2>
          <span class="mui-icon mui-icon-arrowright fr"></span>
        </div>

        <div class="discount-content" id="refreshContainer">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell mui-media" v-for="(item ,index) in discountList" :key="item.productId">
                  <router-link :to="'/limitMoneySonInfo/productid='+item.productId">
                      <img class="mui-media-object mui-pull-left" 
                      v-lazy="imgUrl(index)"
                      >
                      <div class="mui-media-body">
                          <p class="productName">
                            {{item.productName}}
                          </p>
                          <p class="productPrice">
                            {{item.productPinkage}}
                          </p>
                          <p class='mui-ellipsis productSmall'>
                            <span>{{item.productFrom}}</span>
                            |
                            <span>
                              {{item.productTime}}
                            </span>
                          </p>
                      </div>
                  </router-link>
              </li>
            </ul>
        </div>
      </div>
    <!-- more -->
    <a class="moreDiscount">
      <router-link tag="span" to="/moneyctrl">更多优惠信息 》</router-link>
    </a>
    <!-- 品牌排行 -->
    <div class="brand">
      <span>
        品牌排行
      </span>
      <router-link to="/brandTitle" class="brand-more"></router-link>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "./publicComponents/mmHeader.vue"
import mmFooter from "./publicComponents/mmFooter.vue"
import mui from '../lib/mui/js/mui.min.js'

export default {
  data() {
    return {
      menuList: [],
      firstList: [],
      nextList: [],
      menuStartClientX: 0,
      distence: 0,
      index: 0,
      discountList: []
    }
  },
  created() {
    this.getMenuList()
    this.getDiscountList()
  },
  mounted() {
    // mui.init({
    //   pullRefresh : {
    //     container:"#refreshContainer",
    //     down : {
    //       style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
    //       color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
    //       height:'50px',//可选,默认50px.下拉刷新控件的高度,
    //       range:'100px', //可选 默认100px,控件可下拉拖拽的范围
    //       offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
    //       auto: true,//可选,默认false.首次加载自动上拉刷新一次
    //       callback :this.getDiscountList //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    //     }
    //   }
    // })
  },
  methods: {
    getMenuList() {
      this.$http.get("api/getindexmenu").then(res => {
        var list = res.body.result
        // console.log(list)
        this.firstList = list.splice(0, 8)
        this.nextList = list
        this.menuList = this.firstList.concat(this.nextList)
      });
    },
    setHref(i) {
      var cc =''
      this.firstList.forEach(function(item ,index) {
        if(i === index) {
          cc = item.titlehref
          var num = cc.indexOf('.')
          cc = cc.slice(0 ,num)
          cc = '/' + cc
        }
      })
        return cc
    },
    setHref2(i) {
      var cc =''
      this.nextList.forEach(function(item ,index) {
        if(i === index) {
          cc = item.titlehref
          var num = cc.indexOf('.')
          cc = cc.slice(0 ,num)
          cc = '/' + cc
        }
      })
        return cc
    },
    imgName: function(i) {
      var str = "";
      this.menuList.forEach(function(item, index) {
        if (i === index) {
          var count = item.img.indexOf('"');
          var str1 = item.img.slice(count + 1);
          var str2 = item.img.substr(0, count + 1);
          str = str2 + "../" + str1;
          return true;
        }
      });
      return str;
    },
    handleTouchStart(e) {
      this.menuStartClientX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      var moveDistence = e.touches[0].clientX - this.menuStartClientX;
      this.$refs.menuMove.style.transition = "none";
      this.$refs.menuMove.style.transform =
        "translateX(" +
        (-this.index * this.$refs.page1.clientWidth + moveDistence) +
        "px)";
    },
    handleTouchEnd(e) {
      var endClientX = e.changedTouches[0].clientX;
      this.distence = endClientX - this.menuStartClientX;
      if (Math.abs(this.distence) < 100) {
        this.$refs.menuMove.style.transition = "all 0.6s";
        this.$refs.menuMove.style.transform =
          "translateX(" + -this.index * this.$refs.page1.clientWidth + "px)";
        return;
      }
      if (this.distence < 0) {
        this.index++;
        if (this.index === 2) {
          this.index = 1;
        }
      }
      if (this.distence > 0) {
        this.index--;
        if (this.index === -1) {
          this.index = 0;
        }
      }
      this.$refs.menuMove.style.transition = "all 0.6s";
      this.$refs.menuMove.style.transform =
        "translateX(" + -this.index * this.$refs.page1.clientWidth + "px)";
    },
    getDiscountList() {
      this.$http.get("api/getmoneyctrl").then(res => {
        var list = res.body.result
        this.discountList = list
      })
    },
    imgUrl(i) {
      var strReturn = ''
      this.discountList.forEach(function (item ,index) {
        if(index === i) {
          // console.log(item.productImgSm)
          var str = item.productImgSm
          var cc = str.indexOf('imgurl=')
          var strFont = str.slice(0, cc +1)
          var strBack = str.slice(cc+7)
          var strBackcount = strBack.indexOf('"')
          strReturn = strBack.slice(0 , strBackcount)
          return true
        }
      })
      return strReturn
    },
    handleMore(i) {
      if(i !== 7) {
        return
      }
      this.index++
      this.$refs.menuMove.style.transform = "translateX(" + -this.index * this.$refs.page1.clientWidth + "px)"

    }
  },
  computed: {},
  components: {
    mmHeader,
    mmFooter
  }
};
</script>
<style lang="less" scoped>
@import "../../src/less/var";
.home {
  overflow: hidden;
}
.menu {
  width: 200%;
  background-color: #fff;
  padding-bottom: 20/@base;
  .menuPage1 {
    width: 50%;
  }
  .menuPage2 {
    width: 50%;
  }
  ul {
    li {
      float: left;
      width: 25%;
      padding-top: 15 / @base;
      text-align: center;
      a {
        display: block;
        div.img-wrap {
          display: block;
          margin: 20 / @base auto 0;
          width: 105 / @base;
          height: 105 / @base;
        }
        p {
          margin-top: 5 / @base;
          color: #000;
          font-size: 22 / @base;
          margin-bottom: 0;
        }
      }
    }
  }
}
.discount {
  .discount-title {
    height: 70 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 50 / @base;
      margin: 0;
    }
    span {
      font-size: 30 / @base;
      height: 100%;
      line-height: 50 / @base;
    }
  }
  .discount-content {
    position: relative;
    .mui-table-view .mui-media-object {
      line-height: 200/@base;
      max-width: 200/@base;
      height: 200/@base;
    }
    .mui-table-view .mui-media, .mui-table-view .mui-media-body {
      p.productName {
        font-size: 26/@base;
        font-weight: 700;
        line-height: 1.5;
        height: 80/@base;
      }
      p.productPrice {
        font-size: 24/@base;
        color: red;
        margin-top: 12/@base;
      }
    }
    p {
      font-size: 20/@base;
    }
    p.productSmall {
      position: absolute;
      bottom: 20/@base;
    }
    .mui-table-view-cell>a:not(.mui-btn) {
      white-space: unset;
    }
  }
}
.moreDiscount {
  display: block;
  background-color: #fff;
  color: #000;  
  height: 60/@base;
  display: flex;
  align-items: center;
  justify-content: center;
  // line-height: 60/@base;
  margin: 10/@base 0;
  span {
    font-size: 26/@base;
  }
}
.brand {
  height: 70/@base;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffa52f;
  padding: 0 10/@base;
  color: #fff;
  margin-bottom: 20/@base;
  position: relative;
  span {
    font-size: 26/@base;
  }
  a {
    display: block;
    width: 40/@base;
    height: 40/@base;
    // float: right;
    right: 0;
    background: url('../images/more.png') no-repeat;
    background-size: 40/@base 40/@base;
    position: absolute;
    right: 20/@base;
  }
}
</style>
